<html>
<head>
  <title>Demo carrito</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("jquery", "1.4.4");
  </script><script type="text/javascript">
  function addToCart(productId) {
    $.post('/cart/add/',
      { productId: productId },
      function(data){
        $("#numprod").text(data);
      }
    );
  }

  </script>
</head>
<body>

<div id="header">
  Productos en carrito: <span id="numprod">{{ numProd|default_if_none:0 }}</span> | <a href="/cart">Ver carrito</a>
</div>

<h1>A comprar comida!</h1>

<div id="prods">
  <ul>
    {% for product in products %}
      <li>{{ product.name }} | <a href="#" onclick="addToCart({{ product.prodId }});">Añadir al carrito</a></li>
    {% endfor %}
  </ul>
</div>

</body>
</html>